<template>
  <qc-page-table
    ref="rolePageTableRef"
    :columns="columns"
    :loadData="loadData"
    :downloadExcel="downloadExcel"
    :rowKey="(record) => record[primaryKey]"
  >
    <template #toolbarTitle>
      {{ t('org.role.roleTableTitle') }}
    </template>
    <template #toolbarButton>
      <a-input-search
        :placeholder="t('org.role.roleTableSerachPlh')"
        v-model:value="queryParam.roleName"
        @search="onTableSearch"
      ></a-input-search>
      <qc-add-button @click="addButtonClick"></qc-add-button>
      <qc-delete-button @click="deleteButtonClick"></qc-delete-button>
    </template>
    <template #customRoleName="{ text, record }">
      <qc-link :url="roleEditPageUrl + record[primaryKey]">
        {{ text }}
      </qc-link>
    </template>
    <template #customRoleType="{ text, record }">
      <a-tag :color="record.roleType === 'MANAGER_ROLE' ? 'volcano' : 'purple'">
        {{ text }}
      </a-tag>
    </template>
    <template #customIsValid="{ text }">
      <a-tag v-if="text === true" color="#87d068">
        {{ t('org.role.effective') }}
      </a-tag>
      <a-tag v-else color="#f50">
        {{ t('org.role.invalid') }}
      </a-tag>
    </template>
  </qc-page-table>
  <a-modal v-if="showModal" v-model:visible="showModal" @ok="handleOk">
    <template #title> {{ modalTitle }} </template>
    <role-form ref="roleFormRef" @submit-success="submitSuccess"></role-form>
  </a-modal>
</template>
<script lang='ts'>
import { useI18n } from 'vue-i18n'
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import roleApi from '/@/api/org/role'
import { roleTableColumns, roleEditPageUrl } from '/@/views/org/role/interface'
import RoleForm from './role-form.vue'
import { useModelPageTable } from '/@/kit/model-kit'
export default defineComponent({
  name: 'OrgRoleList',
  components: {
    RoleForm,
  },
  setup() {
    const { t } = useI18n()
    const rolePageTableRef = ref(null)
    const roleFormRef = ref(null)
    const queryParam = { roleName: null }
    const { primaryKey, loadData, searchTable, reloadTable, deleteSelectData, downloadExcel } = useModelPageTable(
      rolePageTableRef,
      roleApi,
      queryParam
    )

    const roleState = reactive({
      //编辑页面路由path
      roleEditPageUrl,
      queryParam,
      //表格字段
      columns: roleTableColumns,
      primaryKey,
      loadData,
      downloadExcel,
      onTableSearch: () => reloadTable(),
      //新增角色
      addButtonClick: () => (roleState.showModal = true),
      //删除角色
      deleteButtonClick: () => deleteSelectData(),
      //弹窗标题
      modalTitle: t('org.role.addRole'),
      //是否显示弹窗
      showModal: false,
      //弹窗确认事件
      handleOk: () => roleFormRef.value.onSubmit(),
      //弹窗保存成功后执行
      submitSuccess: () => {
        roleState.showModal = false
        reloadTable()
      },
    })
    onMounted(() => searchTable())
    return {
      t,
      rolePageTableRef,
      roleFormRef,
      ...toRefs(roleState),
    }
  },
})
</script>
